<template>
    <div class="photoinfo-container">
        <h3>标题内容(现代简约式)</h3>
        <p class="subtitle">
            <span>发表时间：2019-5-10</span>
            <span>点击：520次</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumbs">
           <!-- <img class="preview-img" v-for="(item,index) in list" :key="item.src" :src="item.src" height="100" @click="$preview.open(index , list)">  -->
            <vue-preview :slides="list"></vue-preview>
        </div>

        <!-- 图片内容区域 -->
        <div class="content">
            Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用
             Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用
        </div>
        <!-- 放置评论的组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>
<script>
import comment from '../subcomponent/comment.vue'

export default {
    data() {
    return {
        id:this.$route.params.id,
        list:[
            {w:600,h:600,msrc:'http://img2.imgtn.bdimg.com/it/u=2376071863,1797021925&fm=26&gp=0.jpg',src:'http://img2.imgtn.bdimg.com/it/u=2376071863,1797021925&fm=26&gp=0.jpg'},
            {w:600,h:600,msrc:'http://img3.imgtn.bdimg.com/it/u=4281857327,1303982972&fm=26&gp=0.jpg',src:'http://img3.imgtn.bdimg.com/it/u=4281857327,1303982972&fm=26&gp=0.jpg'},
            {w:600,h:600,msrc:'http://img1.imgtn.bdimg.com/it/u=1972536862,3651970711&fm=15&gp=0.jpg',src:'http://img1.imgtn.bdimg.com/it/u=1972536862,3651970711&fm=15&gp=0.jpg'},
            {w:600,h:600,msrc:'http://img2.imgtn.bdimg.com/it/u=1715153604,3681368508&fm=15&gp=0.jpg',src:'http://img2.imgtn.bdimg.com/it/u=1715153604,3681368508&fm=15&gp=0.jpg'},
            {w:600,h:600, msrc:'http://img0.imgtn.bdimg.com/it/u=1365665306,1142267878&fm=15&gp=0.jpg',src:'http://img0.imgtn.bdimg.com/it/u=1365665306,1142267878&fm=15&gp=0.jpg'},
        ]
    }
    },
    components:{
        'cmt-box':comment
    }
}
</script>
<style lang="scss" scoped>
    .photoinfo-container{
        padding: 3px;
        h3{
            color: #26a2ff;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }
        .subtitle{
            display: flex;
            justify-content: space-between;
        }
        .content{
            font-size: 13px;
            line-height: 30px;
        }
        
    }
</style>